<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>北大青鸟五道口考勤记录</title>
 <link rel="stylesheet" href="<%=path %>/siteresource/css/global.css" type="text/css"/>
	<link rel="stylesheet" href="<%=path %>/siteresource/css/list.css" type="text/css"/>
	<link rel="stylesheet" href="<%=path %>/siteresource/css/menu.css" type="text/css"/>
	<script src="<%=path %>/siteresource/js/fixPNG.js" type="text/javascript"></script>
	<style>
#box {
	margin: 0px auto;
	width: 78%;
}

#divs div {
	width: 180px;
	height: 50px;
	margin: 5px;
	background-color: #E0ECFF;
	font-size: 32px;
	line-height: 50px;
	color: black;
	text-align: center;
	float: left;
	text-algin: center;
	cursor: pointer;
}

#divs  div .myclass { 

	background: url(images/ok.png) no-repeat 0px 0px;
	width: 16px;
	height: 16px;
}
#divs div .liveclass{
  
   background: url(images/no.png) no-repeat 0px 0px;
			width: 16px;
			height: 16px;
}

#divs div .laterclass{
  
   background: url(images/li_err.gif) no-repeat 0px 0px;
			width: 16px;
			height: 16px;
}

#divs {
	width: 100%;
	margin: 10px auto;
	position: relative;
}

br {
	clear: both;
}
</style>

<link rel="stylesheet"
	href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css"
	type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
	src="jquery-easyui-1.2.6/plugins/jquery.combotree.js"></script>
<script type="text/javascript"
	src="jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script>
	window.onload = function() {
		var isLater=0;
		//给名单div注册事件
		$("#divs div").live("click", function() {
			$(this).toggle(function() {
				$(this).find("div").removeClass("myclass");
				$(this).css("background","pink");
				$(this).find("div").addClass("liveclass");
				isLater=1;//缺勤
				$(this).attr("status",isLater);
			},function() {
				$(this).find("div").removeClass("liveclass");
				$(this).css("background","#a3cf62");
				$(this).find("div").addClass("laterclass");
				isLater=2;//迟到
				$(this).attr("status",isLater);
			},function(){
				$(this).find("div").removeClass("laterclass");
				$(this).css("background","");
				$(this).find("div").addClass("myclass");
				
				isLater=0;//出勤
				$(this).attr("status",isLater);
			});
			//重点
			 $(this).trigger('click'); 
		});

		var btn = document.getElementById('btn');
		var innerDivs = document.getElementById('divs');
		function boxs(data) {
			var boxs = '';
			innerDivs.innerHTML = '';

			$.each(eval("(" + data + ")"), function(i, dom) {
				if (i % 4 == 0) {
					boxs += '<br />';
				}
				boxs += '<div readonly="readonly" myid='+dom.sid+' status="0"><div class="myclass"></div>' + dom.sname
						+ '</div>';
			});
			
			innerDivs.innerHTML += boxs;
		}
		btn.onclick = function() {
		
			if($('#cc').combotree('getValues')[0]==""){
				$.messager.alert('提示','请先选择年级');   
				return;
			}
			//发送ajax请求
			$.ajax({
				url : '/jboa/stuAction_getStuList',
				type : 'POST',
				data : 'gradeid='+$('#cc').combotree('getValues'),
				success : function(data) {
					boxs(data);
				}
			});
			//
		}
	}
</script>

<script type="text/javascript">
   
   function getIdsAndStatus(){
	   var info="[";
	   var count=0;
	   $("#divs div[myid]").each(function(i,dom){
		  
       	 info+='{"studentid":'+$(dom).attr("myid")+',"isLater":'+$(dom).attr("status")+'},';   
       });
	   info=info.substring(0, info.length-1);
	   info+="]";
	   return info;
   }
	$(function() {
		var today = new Date(); //获得当前时间
		 //获得年、月、日，Date()函数中的月份是从0－11计算
		 var year = today.getFullYear();  
		 var month = today.getMonth()+1;
		 var date = today.getDate();
		 var hour = today.getHours();  //获得小时、分钟、秒
		 var minute = today.getMinutes();
		 var second = today.getSeconds();
        var rdate=year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;

		$('#btnOk').linkbutton();   
		$('#btn').linkbutton();    
		
		$('#btnOk').linkbutton().click(function(){
			if($("#divs div").length==0){
				$.messager.alert('提示','请先生成学生名单');   
				return;
			}
			var info=getIdsAndStatus();
			//发送ajax请求
			$.ajax({
				url : '/jboa/stuRecordAction_add',
				type : 'POST',
				data : {'gradeid':$('#cc').combotree('getValues')[0],'rempid':'${sessionScope.employee.sn}','rdate':rdate,'info':info},
				success : function(data) {
					//定向到今日点名列表页面
					location.href="/jboa/stuRecordAction_selectRecord?gradeid="+$('#cc').combotree('getValues')[0];
				}
			});
		});   
		
		
		$('#cc').combotree({
			url : '/jboa/stuAction_loadData',
			loadFilter : 
				function(data) {
					change(data)
					$.each(data,function (i,v){
						v.iconCls="icon-ok"
					})
					return data;
		        }
		//点击树形结构展开时执行的方法，判断父节点是不是里面没有子节点了，如果没有去按照节点id查询里面的子节点  
		
		//这里注意，请查看后面的有关这里的描述（最后的描述）  
		//$('#cc').combotree("tree").tree("options").url = childsUrl;  
		});
	});
	function change(data){
		if(!data.length){
			data.text=data.name;
			if(data.children){
				change(data.children);
			}
		}else{
			$.each(data,function (i,v){
					change(v);
			}); 
		}
		
	}
</script>
</head>

<body>

	<div id="box" class="infolist">
         <center><h1 style="margin-bottom:15px;">这里是考勤页面</h1></center>
		<div class="searchPro">
			&nbsp;班 级： <select id="cc" style="width:200px;"></select>
			
			<a id="btn" iconCls="icon-save">点击生成学员名单</a>  
			<a id="btnOk" iconCls="icon-save">保存信息</a>  
		</div>
		<p id="divs"></p>
		<br/>
		<div id="say">
		  使用说明：
		  1.<img src="images/ok.png"/>：出勤
		  2.<img src="images/no.png"/>：缺勤
		  3.<img src="images/li_err.gif"/>：迟到
		</div>
	</div>

</body>
</html>



